﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM-jQuery操作表单</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>
<style>
img{width:100%;}
</style>
</head>
<body>
<div class="container-xl a1">
<h1>jquery操作表单</h1>
<input type="text" id="a2" value="你好孙总" />
<input type="button" id="a3" /value="点我">
</div>

<div class="container-xl a4">
<h1>操作文本域高度变化</h1>
<div class="message">
    <div class="msgtop">
        <input type="button" value="放大" id="bigbtn" />
        <input type="button" value="缩小" id="minbtn" />
    </div>
    <div class="test">
        <textarea name="" id="contents" cols="30" rows="4">
            逐浪软件由上海逐一软件科技有限公司创立，公司创立16年来，一直专注最优秀的软件研发，取得了卓越的效果，目前已经服务了包括中化集团、水电基础局、北京军区等多个重点单位。
        </textarea>
    </div>
</div>
</div>

<div class="container-xl a4">
<h1>操作文本域滚动事件</h1>
<div class="message2">
    <div class="msgtop2">
        <input type="button" value="向上" id="upbtn" />
        <input type="button" value="向下" id="downbtn" />
    </div>
    <div class="test">
        <textarea name="" id="contents2" cols="30" rows="4">
            用按钮控制文本上下之逐浪软件由上海逐一软件科技有限公司创立，公司创立16年来，一直专注最优秀的软件研发，取得了卓越的效果，目前已经服务了包括中化集团、水电基础局、北京军区等多个重点单位。
        </textarea>
    </div>
</div>
</div>

<div class="container-xl">
<h1>操作单选按钮</h1>
<form action="" name="form1" id="form1">
<h2>选择你喜欢吃的水果</h2>
<input type="radio" name="suiguo" id="" value="香蕉"> 香蕉
<input type="radio" name="suiguo" id="" value="苹果"> 苹果
<input type="radio" name="suiguo" id="" value="李子"> 李子
<input type="radio" name="suiguo" id="" value="西瓜"> 西瓜
<input type="radio" name="suiguo" id="hyous" value="胡柚"> 胡柚 <br>
<input type="button" value="苹果" id="suiguo1">
<input type="button" value="李子" id="suiguo2">
<input type="button" value="西瓜" id="suiguo3">
<input type="button" value="胡柚" id="suiguo4">
</form>
</div>

<div class="container-xl">
<h1>操作多选按钮</h1>
<form action="" name="form1" id="form2">
<h2>选择你喜欢吃的运动</h2>
<input type="checkbox" name="spors" id="s1" value="足球"> 足球
<input type="checkbox" name="spors" id="" checked value="游泳"> 游泳
<input type="checkbox" name="spors" id="" value="跑步"> 跑步
<input type="checkbox" name="spors" id="" value="体操"> 体操
<input type="checkbox" name="spors" id="" value="瑜珈"> 瑜珈 <br>
<input type="button" value="足球" id="spors1">
<input type="button" value="全选" id="spors2">
<input type="button" value="全不选" id="spors3">
<input type="button" value="反选" id="spors4">
<input type="button" value="提交" id="spors5">
</form>
</div>

<div class="container-xl xiala">
<div class="row">
    <div class="col bg-info">
<h1>操作下拉框</h1>
<select name="hobbys" id="hobbys" multiple class="selbox">
<option value="登山">登山</option>
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="观星">观星</option>
<option value="钓鱼">钓鱼</option>
<option value="洗尘">洗尘</option>
</select>
<div class="sdd">
<button id="addsdd">添加>></button>
<button id="addsdd2">全部添加>></button>
</div>
</div>
<div class="col bg-light">
<select name="hobby-other" id="hobby-other" multiple class="selbox">
</select>

<div class="sdd">
<button id="adddels">删除>></button>
<button id="adddels2">双击全部删除>></button>
</div>
</div>
</div>
</div>

<div class="container-xl biaoD">
<h1>表单验证</h1>
<form action="" id="biaoDs">
<div>用户名：<input type="text" name="username" id="username" class="bbss"> </div>
<div>密码：<input type="password" name="pwd" id="pwd" class="bbss"> </div>
<div>性别：<input type="text" name="sex" id="sex"> </div>
<div>年龄：<input type="text" name="age" id="age"> </div>
<input type="submit" value="注册" name="sub">
<input id="alldell" type="button" value="删除" name="sub">
</form>
</div>




<script>
$(document).ready(function () {
    $(`#a2`).attr(`disabled`,`disabled`);
    $(`#a2`).removeAttr(`disabled`);
    $(`#a2`).attr(`value`,"要设置的值在这里");

    const aa=$(`#a2`).val();
    $(`#a3`).click(function name(params) {
    alert(aa);
    })
})

// 操作文本域高度变化
$(document).ready(function () {
    let $cons=$(`#contents`);
    $(`#bigbtn`).click(function () {
        if(!$cons.is(`:animated`)){
            if($cons.height()<350){
                $cons.animate({height:`+=70`},500);
            }
        }
    })
    $(`#minbtn`).click(function () {
        if(!$cons.is(`:animated`)){
            if ($cons.height()>70) {
                //将文本域在原来的高度上减少70
                $cons.animate({height:`-=70`},500);
            }
        }
    })
})

// 操作文本域滚动事件
$(document).ready(function () {
    let $conas=$(`#contents2`);
    $(`#upbtn`).click(function () {
        if(!$conas.is(`:animated`)){
            if ($conas.height()<350) {
                $conas.animate({scrollTop:`-=40`},500);
            }
        }
    })
    $(`#downbtn`).click(function () {
        if (!$conas.is(`:animated`)) {
            if ($conas.height()>70) {
                $conas.animate({scrollTop:`+=40`},500);
            }
        }
    })

    
})

// 操作单选按钮
$(document).ready(function () {
    $(`#suiguo1`).click(function () {
        $(`#form1 input:radio`).eq(0).prop(`checked`,true);
    })
    $(`#suiguo2`).click(function () {
        $(`#form1 input:radio`).eq(2).prop(`checked`,true);
    })
    $(`#suiguo4`).click(function () { //用ID选中胡柚
        $(`#form1 #hyous`).prop(`checked`,true);
    })
})

// 操作多选按钮
$(document).ready(function () {
    $(`#spors1`).click(function () {
        $(`#form2 #s1`).eq(0).prop(`checked`,true);
    })
    $(`#spors2`).click(function () {    //全选
        $(`#form2 input[type=checkbox]`).prop(`checked`,true);
    })
    $(`#spors3`).click(function () {    //全不选
        $(`#form2 input[type=checkbox]`).removeAttr(`checked`);
    })
    $(`#spors4`).click(function () {    //全不选
        $(`#form2 input[type=checkbox]`).each(function () {
            this.checked=!this.checked;
        });
    })
    $(`#spors5`).click(function () {
        let msg=`你喜欢的运行是：\r\n`;
        $(`#form2 input[type=checkbox]:checked`).each(function () {
            msg+=$(this).val()+`\r\n`;
        })
        alert(msg);
        // document.write(msg);
    })
})

// 操作下拉框
$(document).ready(function () {
    $(`#addsdd`).click(function () {
        let $opts=$(`#hobbys option:selected`); //获取左边选中项
        $opts.appendTo(`#hobby-other`); //添加到右边
    })
    $(`#addsdd2`).click(function () {
        let $opts=$(`#hobbys option`);
        $opts.appendTo(`#hobby-other`); //全部添加
    })
    $(`#adddels`).click(function () {
        let $opts=$(`#hobby-other option:selected`);
        $opts.appendTo(`#hobbys`);
    })
    $(`#adddels2`).dblclick(function () {
        let $opts=$(`#hobby-other option`);
        $opts.appendTo(`#hobbys`);
    })

})

// 注册表单验证
$(document).ready(function () {
    $(`#biaoDs .bbss`).each(function () {
        let $requs=$(`<strong class="star">*</strong>`); //创建元素
        $(this).parent().append($requs);    //将其追加到文档
    })
    $(`#biaoDs :input`).blur(function () {
        if($(this).is(`#username`)){
            if($(this).val()==``){
                alert(`用户名不能为空~`);
            }
        }
        if($(this).is(`#pwd`)){
            if($(this).val()==``){
                alert(`密码不能为空`);
            }
            if(this.value.length<9){
                alert(`密码不能小于9位，请重新输入~`);
            }
        }
    });
    $(`#alldell`).click(function () {
        alert(`禁止删除，大哥~！`);
    })



})


</script>
</body>
</html>
